<extend name="Common/baseView"/>
<block name="css">
    <style>
        .layui-table tr {
            height: 20px;/*数值按需更改*/
        }
    </style>
</block>
<block name="body">
    <div id="goodslistBody" style="padding: 10px;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>产品列表</legend>
        </fieldset>
        <!--产品列表操作-->
        <!--数据接收参考-->
        <form class="layui-form" >
            <div class="layui-form-item" style="padding-left: 10%;">
                <div class="layui-input-inline" style=" width:250px; ">
                    <input type="text" name="search" id="search" lay-verify="" placeholder="请输入名称或者产品编号"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style=" ">
                    <div  class="layui-btn" id="submit" lay-submit lay-filter="search">查找</div>
                </div>
            </div>

        </form>
        <table id="goodsList" lay-filter="goodsList">
        </table>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

</block>
<block name="js">
    //JavaScript代码区域
    <script>
        $('#goodsShow').addClass("layui-this");
        $('#goods').addClass("layui-nav-itemed");
        //    数据表格操作
        layui.use(['table','jquery'], function(){
            var table = layui.table;
            var $ = layui.jquery;


            //监听工具条
            $('#submit').on('click',function () {
                var searchValue = $('#search').val();
                table.render({
                    elem: '#goodsList'
                    ,url: '{:U("Goods/showList")}' //数据接口
                    ,method:'post'
                    ,where:{search:searchValue}
                    ,page: true //开启分页
                    ,limit:10
                    ,cols: [[ //表头
                        {type:'checkbox', fixed: 'left'}
                        ,{field: 'id', title: 'ID', width:60, sort: true, fixed: 'left'}
                        ,{field: 'name', title: '产品名称', width:273}
                        ,{field: 'goods_no', title: '编号', width:111}
                        ,{field: 'price', title: '价格', width:92 ,sort:true}
                        ,{field: 'material_color', title: '材质颜色', width: 150}
                        ,{field: 'pro_num', title: '产品数量', width: 100}
                        ,{field: 'pro_standard', title: '产品规格', width: 122}
                        ,{field: 'pro_size', title: '产品大小', width: 100}
                        ,{field: 'festival', title: '适用节日', width: 215}
                        ,{field: 'target', title: '适用对象', width: 150}
                        ,{field: 'situation', title: '适用场景', width: 150}
                        ,{field: 'class', title: '产品品类', width: 100}
                        ,{field: 'type', title: '产品类型', width: 100}
                        ,{field: 'series', title: '产品系列', width: 193}
                        ,{field: 'standard', title: '品类规格', width: 110}

                        ,{fixed:'right',width:150, align:'center', toolbar: '#barDemo'}
                    ]]
                });
            });


            table.on('tool(goodsList)', function(obj){
                var data = obj.data;

                if(obj.event === 'detail'){
                    $.ajax({
                       url:"{:U('goodsDetail')}",
                        data: 'id='+data.id+'&show=detail',
                        method:'post',
                        success:function (res) {
                            $('#goodslistBody').html(res);
                        }
                    });
                    //layer.msg('ID：'+ data.id + ' 的查看操作');
                } else if(obj.event === 'del'){
                    layer.confirm('删除此条记录？', function(index){
                        $.ajax({
                            url:"{:U('goodsDelete')}",
                            data: 'id='+data.id,
                            method:'post',
                            success:function (res) {
                                if(res){
                                    obj.del();
                                    layer.close(index);
                                    layer.msg('删除成功！！');
                                }else{
                                    layer.close(index);
                                    layer.msg('删除失败');
                                    layer.msg(res);
                                }
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    $.ajax({
                        url:"{:U('goodsDetail')}",
                        data: 'id='+data.id+'&show=edit',
                        method:'post',
                        success:function (res) {
//                            console.log(res);
                            $('#goodslistBody').html(res);
                        }
                    });
                }
            });

            table.render({
                elem: '#goodsList'
                ,url: '{:U("Goods/showList")}' //数据接口
                ,method:'post'
                ,page: true //开启分页
                ,limit:10
                ,cols: [[ //表头
                    {type:'checkbox', fixed: 'left'}
                    ,{field: 'id', title: 'ID', width:60, sort: true, fixed: 'left'}
                    ,{field: 'name', title: '产品名称', width:273}
                    ,{field: 'goods_no', title: '编号', width:111}
                    ,{field: 'price', title: '价格', width:92 ,sort:true}
                    ,{field: 'material_color', title: '材质颜色', width: 150}
                    ,{field: 'pro_num', title: '产品数量', width: 100}
                    ,{field: 'pro_standard', title: '产品规格', width: 122}
                    ,{field: 'pro_size', title: '产品大小', width: 100}
                    ,{field: 'festival', title: '适用节日', width: 215}
                    ,{field: 'target', title: '适用对象', width: 150}
                    ,{field: 'situation', title: '适用场景', width: 150}
                    ,{field: 'class', title: '产品品类', width: 100}
                    ,{field: 'type', title: '产品类型', width: 100}
                    ,{field: 'series', title: '产品系列', width: 193}
                    ,{field: 'standard', title: '品类规格', width: 110}

                    ,{fixed:'right',width:150, align:'center', toolbar: '#barDemo'}
                ]]
            });

        });
    </script>
</block>
